<template>
	<u-popup v-model="popupVisible" mode="center" width="75%" @close="$closePopup()">
		<view class="form-box">
			<view class="form-title">恭喜您获奖！请提交个人信息~</view>
			<u-cell-group :border="false">
				<u-field :maxlength="50" v-model="clearForm.name" label="姓名" placeholder="请输入姓名"></u-field>
				<u-field :maxlength="11" type="number" v-model="clearForm.phone" label="手机号" placeholder="请输入手机号"></u-field>
				<u-field
					:border-bottom="false"
					:maxlength="500"
					:field-style="{ 'line-height': '42rpx' }"
					placeholder-style="font-size:28rpx"
					class="text_area"
					autosize
					type="textarea"
					v-model="clearForm.address"
					label="收货地址"
					placeholder="请输入收货地址"
				></u-field>
				<!-- <textarea class="text_area" v-model="clearForm.address" :maxlength="500" placeholder="请输入收货地址"></textarea> -->
			</u-cell-group>
			<view class="form-sub-wrap flex-ct"><view @click="submitOrder" class="form-sub">提交</view></view>
		</view>
	</u-popup>
</template>

<script>
import { isMobile } from '@/utils/validate.js';
export default {
	components: {},
	props: {
		value: {
			type: Boolean,
			default: false
		},
		orderId: {
			type: Number,
			default: null
		},
		prizeObj: {
			type: Object,
			default: () => {
				return {};
			}
		}
	},
	watch: {
		value: {
			handler(val) {
				console.log('va',val)
				if (val) {
					this.popupVisible = true;
				}
					console.log('popupVisible',this.popupVisible)
			}
		}
	},
	data() {
		return {
			clearForm: {
				name: '',
				phone: '',
				address: ''
			}, // 需要提交的信息
			popupVisible: false
		};
	},

	mounted() {},

	methods: {
		$closePopup() {
			this.$emit('input', false);
		},
		submitOrder() {
			this.$loading({
				title: '正在提交'
			});

			if (!this.clearForm.name) {
				this.$toast('请输入姓名');
				return;
			}
			if (!this.clearForm.phone) {
				this.$toast('请输入手机号');
				return;
			} else if (!isMobile(this.clearForm.phone)) {
				this.$toast('手机号格式错误');
				return;
			}
			if (this.prizeObj.mode == '1' && !this.clearForm.address) {
				this.$toast('请输入收货地址');
			}

			this.$resPost('UpdateGameOrderInfo', {
				order_id: this.orderId,
				...this.clearForm
			})
				.then(() => {
					this.$toast('【温馨提示】恭喜您获奖！我们将尽快为您安排快递，敬请留意电话！谢谢您的支持！');
					this.popupVisible = false;
					this.$emit('submitFinsh', { ...this.clearForm });
					this.clearForm = {};
				})
				.catch(() => {
					wxHide();
				});
		}
	}
};
</script>

<style scoped lang="scss">
.form-box {
	width: 100%;
	padding: 0 20rpx;
	border-radius: 20rpx;
	overflow: hidden;
}
.form-title {
	width: 100%;
	height: 130rpx;
	padding: 15rpx 30rpx;
	display: flex;
	justify-content: center;
	color: #ff8400;
}
.form-sub-wrap {
	width: 100%;
	padding: 100rpx 0;
}
.text_area {
	font-size: 28rpx;
	width: 100%;
	line-height: 38rpx;
	height: 114rpx;
}
.form-sub {
	color: #fff;
	display: flex;
	align-items: center;
	justify-content: center;
	margin: 0 auto;
	width: 400rpx;
	height: 70rpx;
	background-color: #e93324;
	border-radius: 35rpx;
}
</style>
